<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
			    position: relative;
				width: 300px;
				height: 250px;
				margin-top: 20%;
			}
			.box img{
				width: 300px;
				height: 250px;
			    opacity:1;
			    transform: translateY(0) rotateX(0);
			    transition: 1s;
			}
			.box:hover img{
			    transform: translateY(-100%) rotateX(90deg);
			    transform-origin: center bottom 0;
			    opacity:0;
			}
			.over-layer{
				width: 300px;
				height: 250px;
			    position: absolute;
			    top:0;
			    left:0;
			    opacity:0;
			    text-align:center;
			    transition: all 0.60s;
			    color: white;
				 background: #b1d047;
			}
			.box:hover .over-layer{
			    opacity:1;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/1.png" >
			<div class="over-layer">
				<h3>标题</h3>
				<p>内容</p>
			</div>
		</div>
	</body>
</html>
